<template>
	<view class="team-person">
		<view class="flex-between" style="margin-bottom: 30rpx;">
			<view class="bold">选择赛事队伍</view>
			<view style="color: #2F75FA;" @click="add" v-if="list.length">添加</view>
		</view>
		
		<!-- <u-checkbox-group v-model="checked" shape="circle" v-if="list.length" @change="checkboxChange">
			<view class="list" style="width: 100%;">
				<team-info-item
					v-for="item in list"
					:key="item.id"
					:data="item"
				>
					<template #right>
						<u-checkbox :name="item.id" @change="radioChecked( item)" :value="item.id"/>
					</template>
					
					<template #description>
						<view class="flex-between">
							<view style="color: #999;">{{ item.member.length }}名队员</view>
							<view>
								<view class="add-member flex-center" v-if="!item.member.length" @click="addMember">
									<u-icon name="plus" color="#999"></u-icon>
								</view>
								<view class="avatar-list d-flex">
									<view
										class="avatar"
										v-for="it in item.member.slice(0, 2)"
										:key="item.id"
									>
										<u-avatar
											:src="item.avatar"
											size="72rpx"
										/>
									</view>
								</view>
							</view>
						</view>
					</template>
				</team-info-item>
			</view>
		</u-checkbox-group> -->
		<u-radio-group v-model="checked" shape="circle" v-if="list.length" @change="checkboxChange">
			<view class="list" style="width: 100%;">
				<team-info-item
					v-for="item in list"
					:key="item.id"
					:data="item"
				>
					<template #right>
						<u-radio :name="item.id" @change="radioChecked( item)" :value="item.id"/>
					</template>
					
					<template #description>
						<view class="flex-between" @click="addMember(item)">
							<!-- <view style="color: #999;">3名队员</view> -->
							<view style="color: #999;" v-if="item.memberData != ''">{{ item.memberData[0].length }}名队员</view>
							<view style="color: #999;" v-if="item.memberData == ''">0名队员</view>
							
							<view>
								<view class="add-member flex-center" v-if="!item.memberData[0].length" >
									<u-icon name="plus" color="#999"></u-icon>
								</view>
								<view class="avatar-list d-flex">
									<!-- v-for="it in item.memberData[0].avatar.slice(0, 2)" -->
									<!-- <view
										
										v-for="it in item.memberData"
										:key="item.id"
									> -->
									<view
										class="avatar"
										v-for="ita in item.memberData[0].avatar"
										:key="item.id"
									>
										<u-avatar
											:src="ita"
											size="72rpx"
										/>
									</view>
									<!-- </view> -->
								</view>
							</view>
						</view>
					</template>
				</team-info-item>
			</view>
		</u-radio-group>
		
		<view v-else @click="add">
			<u-empty :icon="`${assetsPath}15ee183896ac4578c2c37c556b178a1ad00fec6a.png`" text="请添加队员或队伍>" textColor="#2F75FA" marginTop="80rpx"></u-empty>
		</view>
	</view>
</template>

<script>
import { getCurrentPath } from '@/utils/util.js';
	
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		// value: {
		// 	type: Array,
		// 	default: () => []
		// }
	},
	data() {
		return {
			assetsPath: this.$https.assetsPath,
		}
	},
	computed: {
		checked: {
			get() {
				console.log(this.value,'op')
				return this.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		checkboxChange(n) {
		},
		radioChecked(item) {
			console.log(item,'123')
		},
		add() {
			uni.navigateTo({
				// url: `/pages/personal/team-info/add/add?return=${getCurrentPath()}`
				// url: '/page_venues/pages/team-info/add/add?return=${getCurrentPath()}'
				// url: `/page_venues/pages/team-info/add/add?return=${getCurrentPath()}`
				url: '/page_venues/pages/team-info/add/add?type='+ 1
			});
		},
		addMember(item) {
			console.log(item,'666')
			uni.navigateTo({
				url: '/pages/race/choose-member/add-member/add-member?race_id=' +
						item.race_id+
						"&length=" +
						item.memberData[0].length +
						"&member_ids=" +
						item.memberData[0].member_ids +
						"&team_id=" +
						item.id,
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.team-person {
	.add-member {
		width: 72rpx;
		height: 72rpx;
		border: 1rpx dashed #999;
		border-radius: 50%;
	}	
	
	/deep/.avatar-list {
		transform-style: preserve-3d;
		
		.avatar:first-of-type {
			transform: translateX(50%) translateZ(-1px);
		}
	}
}

</style>